<template>
  <uni-popup ref="popup" type="bottom" :safe-area="false" :mask-click="true">
    <view class="panel-container">
      <view class="header">
        <view style="font-weight: 500;display: inline-block;margin-right: 36upx;">答题进度</view>
        <text>{{ index + 1 }}/</text>
        <text style="color: #999;">{{ list.length }}</text>
        <view style="flex: 1"/>
        <view style="width: 26upx;height: 110upx;display: flex" @click="close">
          <image src="@/static/panel_guanbi.png"
                 style="width: 26upx;height: 26upx; align-self: center"
          ></image>
        </view>
      </view>
      <view class="status">
        <image src="@/static/zhengque@3x.png" style="width:30upx;height: 30upx;margin-right: 10upx;"></image>
        <text style="margin-right: 10upx;">正确 {{ correctNum }}</text>
        <image src="@/static/icon_error@3x.png"
               style="width:30upx;height: 30upx;margin-left: 64upx;margin-right: 10upx;"></image>
        <text style="flex:1">错误 {{ errorNum }}</text>
        <view class="clear-btn" v-if="type ==='moni'" @click="showSubmitExamDialog">提交试卷</view>
        <view class="clear-btn" v-else @click="clearAnswer">清空做题记录</view>
      </view>
      <scroll-view class="body" :scroll-into-view="scrollTo" scroll-y="true">
        <view v-for="(row, i) in rows" :key="i" style="display: flex; flex-direction: row" :id="'row'+i">
          <view class="item" v-for="(item, j) in row" style=" flex-direction: row" :key="item.id"
                @click="clickQuestion(i * 6 + j)">
            <view :class="['question', getPopupItemStyle(i * 6 + j)]">{{ i * 6 + j + 1 }}</view>
          </view>
        </view>
      </scroll-view>
    </view>
  </uni-popup>
</template>

<script>
import questionCache from "@/libs/questionCache";

export default {
  props: ['type', 'storeId'],
  name: 'AnswerPanel',
  data() {
    return {
      index: 0,
      correctNum: 0,
      errorNum: 0,
      list: [],
      scrollTo: null
    }
  },
  computed: {
    rows() {
      const list = [...this.list]
      const rows = []
      let end = false

      while (!end) {
        const row = list.splice(0, 6)
        if (row.length) {
          rows.push(row)
        } else {
          end = true
        }
      }

      return rows
    }
  },
  mounted() {
    questionCache.getStore(this.storeId).subscribe('clearAnswer', (i) => {
      this.close()
      questionCache.getStore(this.storeId).clearAnswer()
      this._correctNum = 0
      this._errorNum = 0
      questionCache.getStore(this.storeId).changeIndex(0)
    })
    questionCache.getStore(this.storeId).subscribe('changeIndex', (i) => {
      this.index = i
    })
    questionCache.getStore(this.storeId).subscribe('initList', this.setData)
    questionCache.getStore(this.storeId).subscribe('answer', ({id, index, status}) => {
      /**
       *  防止卡答题ui
       */
      if (status === 1) {
        this._correctNum++
      } else {
        this._errorNum++
      }
    })
  },
  methods: {
    setData({index, list}) {
      let correctNum = 0
      let errorNum = 0
      list.map(item => {
        if (item.status === 1) {
          correctNum++
        } else if (item.status === -1) {
          errorNum++
        }
      })
      this._errorNum = errorNum
      this._correctNum = correctNum

      this.list = list
      this.index = index
    },
    getPopupItemStyle(i) {
      const status = questionCache.getStore(this.storeId).getAnswer(i).status;
      if (this.index === i) {
        return 'current'
      } else if (status == -1) {
        //错误
        return 'error'
      } else if (status == 1) {
        //正确
        return 'success'
      }
    },
    open() {
      this.correctNum = this._correctNum
      this.errorNum = this._errorNum
      this.$refs.popup.open()
      this.scrollTo = 'row'+ Math.floor(this.index / 6)
    },
    clickQuestion(i) {
      questionCache.getStore(this.storeId).changeIndex(i)
      this.$refs.popup.close()
    },
    clearAnswer() {
      questionCache.getStore(this.storeId).publish('showClearAnswerDialog')
    },
    showSubmitExamDialog() {
      questionCache.getStore(this.storeId).publish('submitExam')
    },
    close() {
      this.$refs.popup.close()
      this.scrollTo = null
    }
  }
}
</script>

<style lang='scss'>
.panel-container {
  background-color: #fff;
  height: 1000upx;
  border-top-left-radius: 24upx;
  border-top-right-radius: 24upx;
  display: flex;
  flex-direction: column;

  .header {
    display: flex;
    height: 110upx;
    line-height: 110upx;
    padding: 0 40upx;
    font-size: 30upx;
    color: #292929;
  }

  .status {
    height: 74upx;
    background-color: #f9f9f9;
    color: #4e4e4e;
    display: flex;
    align-items: center;
    padding: 0 30upx 0 40upx;
    font-size: 24upx;

    .clear-btn {
      background-color: #3073F6;
      color: #fff;
      font-size: 28upx;
      height: 74upx;
      border-radius: 37upx;
      padding: 0 37upx;
      display: flex;
      align-items: center;
      justify-content: center;
    }
  }

  .wrapper {
    flex: 1;
  }

  .body {
    margin-bottom: 30upx;
    margin-top: 30upx;
    flex: 1;
    overflow: auto;
    background-color: white;

    .item {
      width: 125upx;
      height: 125upx;
      display: flex;
      justify-content: center;
      align-items: center;

      .question {
        width: 80upx;
        height: 80upx;
        border: 2upx solid #e2e2e2;
        border-radius: 44upx;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 26upx;
        color: #999;

        &.current {
          border: 2upx solid #000;
          color: #000;
        }

        &.success {
          border: 2upx solid #3073F6;
          color: #3073F6;
        }

        &.error {
          border: 2upx solid #FB3C3D;
          color: #FB3C3D;
        }
      }
    }
  }
}
</style>
